<template>
  <view class="load-more-container">
    <view class="load-more" v-if="hasMore">
      <view v-if="loading" class="loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else @click="handleLoadMore" class="load-more-btn">
        <text class="load-more-text">加载更多</text>
      </view>
    </view>
    <view v-else class="no-more">
      <view class="divider"></view>
      <text class="no-more-text">没有更多评价了</text>
      <view class="divider"></view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  hasMore: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['load-more']);

const handleLoadMore = () => {
  if (!props.loading && props.hasMore) {
    emit('load-more');
  }
};
</script>

<style lang="scss" scoped>
.load-more-container {
  padding: 10px 0 30px;
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  display: flex;
  align-items: center;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #07c160;
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
  margin-right: 6px;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: #999;
  font-size: 14px;
}

.load-more-btn {
  background-color: #f5f5f5;
  padding: 8px 24px;
  border-radius: 20px;
  transition: background-color 0.2s ease;
  
  &:active {
    background-color: #e8e8e8;
  }
}

.load-more-text {
  color: #666;
  font-size: 14px;
}

.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.no-more-text {
  color: #999;
  font-size: 13px;
  margin: 0 10px;
}

.divider {
  height: 1px;
  background-color: #eee;
  flex: 1;
  max-width: 80px;
}
</style>
